<script setup>

import {ref, onMounted, onUnmounted, watch, computed} from "vue";
import {useRoute, useRouter} from "vue-router";
import {Position} from "@element-plus/icons-vue";
import {use_app_state_store} from "@/stores/systemStatus.js";
import {storeToRefs} from "pinia";
import MusicPlayer from "@/a-components/less/MusicPlayer.vue";
import CommonFooter from "@/a-views/CommonFooter.vue";
import Input1 from "@/a-components/Input1.vue";
import ContactItem from "@/a-components/less/ContactItem.vue";
import RecommendItem from "@/a-components/less/RecommendItem.vue";

let appStates = use_app_state_store()
const {
    musicPlayerState,
    contacts,
    recommendItems
} = storeToRefs(appStates)
let route = useRoute();
let showCodeBean = ref(false)
onMounted(() => {
})

/*紧挨页面顶部*/
const scrollTo = (selector) => {
    const element = document.querySelector(selector);
    if (element) {
        element.scrollIntoView({behavior: "smooth"});
    }
}
/*与页面顶部有一定距离*/
const scrollToWithOffset = (selector, topOffset = 100) => {
    const element = document.querySelector(selector);
    if (element) {
        const offsetTop = element.getBoundingClientRect().top + window.scrollY - topOffset;
        window.scrollTo({
            top: offsetTop,
            behavior: "smooth"
        });
    }
};

watch(() => route.hash, (newValue) => {
    //在 router/index.js统一处理
    // scrollToWithOffset(newValue + '-offset')
  /*  setTimeout(() => {
        appStates.$patch({headerState: {transform: 'translateY(0)'}})
    }, 800)*/
}, {immediate: true})
/* music player*/
let musicPlayerBorderRadius = ref('50px 50px 0 0 ')

function musicPlayerStateChange(fixed) {
    if (fixed) {
        musicPlayerBorderRadius.value = '0 0 50px 50px'
    } else {
        musicPlayerBorderRadius.value = '50px 50px 0 0'
    }
}

/* music player*/
</script>

<template>
    <el-backtop :right="10" :bottom="10"/>

    <div class="full-screen">
        <div id="index" class="index">
            <div class="content">
                <div class="introduce">
                    <img src="@/assets/svg/commonOn.svg"/>
                    <h1>Q享</h1>
                    <h3>齐分享，同乐趣，共进步!</h3>

                </div>

                <div class="links">
                    <RouterLink to="#about">关于</RouterLink>
                    <RouterLink to="#recommend">推荐</RouterLink>
                    <RouterLink to="#contact">联系/加入</RouterLink>
                    <RouterLink to="#declare">说明</RouterLink>

                </div>
            </div>

            <el-affix class="music-player"
                      @change="musicPlayerStateChange"
                      :offset="musicPlayerState.offset"
                      :z-index="99">
                <MusicPlayer :style="{borderRadius:musicPlayerBorderRadius}"></MusicPlayer>
            </el-affix>

        </div>
        <!--   -offset实现在js中添加后缀实现平滑滚动，否则与默认的hash定位冲突就会是瞬间滚动 -->
        <section id="about-offset" class="about">
            <div class="content">
                <img src="@/assets/img/about-img-1.png" alt="">
                <div class="detail item">
                    <h2>Q享能做什么?</h2>
                    <p>齐分享，同乐趣，共进步！</p>
                    <div class="icons">

                        <div class="icon">
                            <el-icon>
                                <component theme="outline" :is="'icon-'+'music'"/>
                            </el-icon>
                            <h3>音乐</h3>
                        </div>
                        <div class="icon">
                            <el-icon>
                                <component theme="outline" :is="'icon-'+'picture'"/>
                            </el-icon>
                            <h3>图片</h3>
                        </div>
                        <div class="icon">
                            <el-icon>
                                <component theme="outline" :is="'icon-'+'video'"/>
                            </el-icon>
                            <h3>视频</h3>
                        </div>
                    </div>
                    <RouterLink to="/menu" class="more">更多</RouterLink>
                </div>
            </div>
        </section>
        <div id="recommend-offset" class="recommend">
            <div class="content">
                <h2 class="title"> 推荐 </h2>
                <div class="titles">
                    <!--                    <RecommendItem v-for="(item,index) in blogs"
                                                       :key="index"
                                                       bean="item">
                                        </RecommendItem>-->
                    <RecommendItem v-for="(item,index) in recommendItems"
                                   :key="index"
                                   :bean="item"/>

                </div>

            </div>
        </div>

        <div id="contact-offset" class="contact">
            <div class="content">
                <h2 class="title"> 联系/加入我们 </h2>
                <div class="contact-info-container">
                    <ContactItem v-for="(item,index) in contacts" :key="index"
                                 :bean="item"></ContactItem>
                </div>
                <iframe class="map w-100" src="https://lbsyun.baidu.com/jsdemo/demo/k0_8.htm" width="600" height="450"
                        style="border:0;" allowfullscreen="" loading="lazy"></iframe>
            </div>
        </div>

        <CommonFooter id="declare-offset"/>

    </div>
</template>

<style scoped lang="less">
@import "@/assets/main.less";

.item {
    width: 100%;
    background-color: white;
}

.full-screen {
    .m-bg;
    width: 100%;
    min-height: 100vh;
    font-size: 16px;


    .index {
        padding: @headerHeight 0 0 0;
        height: 100vh;
        display: flex;
        flex-direction: column;


        .content{
            .m-reactive-box;
            color: @dark-font-color;
            flex: 1;
            display: flex;
            flex-direction: column;
            place-items: center center;

            .introduce {
                display: flex;
                flex: 1;
                flex-direction: column;
                place-items: center center;
                place-content: center;

                img {
                    width: 600px;
                    max-width: 100%;
                    max-height: 240px;
                }
            }

            .links {
                font-size: 1.2em;
                padding: 20px 0;

                display: flex;
                gap: 0 12px;
                place-items: center;
                flex-wrap: wrap;

                a {
                    .m-a-1();
                    color: @light-link-color;
                }
            }
        }

        .music-player {
            width: 100%;
            height: fit-content;
        }

    }

    .about {
        width: 100%;
        background-color: white;
        padding: 0 8px 15px;

        .content {
            .m-reactive-box;
            min-height: 60vh;
            display: grid;
            grid-template-columns: repeat(2, 1fr);

            place-content: center;
            place-items: center;

            color:@light-font-color;

            @media (max-width: 650px) {
                grid-template-columns: 1fr;
            }

            img {
                width: 60%;
                @media (max-width: 300px) {
                    width: 100%;
                }
            }

            .detail {
                width: 100%;
                place-self: center;

                h2 {
                    line-height: 100%;
                    padding: .8em 0;
                }

                P {
                    padding: 0;
                    font-size: 1em;
                    color: #666;
                }

                .more {
                    display: inline-block;
                    margin:0px 0px 0;
                    font-size: 1em;
                    padding: 10px 18px;
                    border: @light-theme-color solid 1px;
                    color:inherit;

                    &:hover {
                        background: @light-theme-color;
                        color: white;
                    }
                }

                .icons {
                    display: -webkit-box;
                    display: -ms-flexbox;
                    display: flex;
                    -ms-flex-wrap: wrap;
                    flex-wrap: wrap;
                    gap: .5em 1em;

                    margin:20px 0px 15px;

                    .icon {
                        display: flex;
                        flex-direction: column;
                        place-items: center;
                        background: #eee;
                        text-align: center;
                        -webkit-box-flex: 1;
                        -ms-flex: 1 1 8em;
                        flex: 1 1 8em;
                        padding: 5px 0;
                        border-radius: 15px;

                        i {
                            font-size: 3rem;
                            color: @light-theme-color;

                            span {
                                display: flex;
                                place-items: center;
                                place-content: center;
                            }
                        }

                        h3 {
                            text-transform: capitalize;
                            color: #222;
                        }
                    }

                }

            }
        }
    }

    .recommend {
        width: 100%;
        background-color: #eee;
        padding: 10px 24px 20px;

        .content {
            .m-reactive-box;

            .title {
                letter-spacing: .3em;
                text-align: center;
            }

            .titles {
                display: -ms-grid;
                display: grid;
                grid-template-columns: repeat(4, 1fr);
                gap: 2rem;

                @media (max-width: 1300px ) {
                    grid-template-columns: repeat(3, 1fr);
                }
                @media (max-width: 900px ) {
                    grid-template-columns: repeat(2, 1fr);
                    gap: 1em 1em;
                }
                @media (max-width: 500px ) {
                    grid-template-columns: 1fr;
                }
            }

        }
    }

    .contact {
        width: 100%;
        background-color: white;
        padding: 10px 8px 10px;
        text-align: center;

        .content {
            .m-reactive-box;

            .contact-info-container {
                display: -ms-grid;
                display: grid;
                grid-template-columns: repeat(4, 1fr);
                gap: 1em 2em;
                margin-bottom: 1rem;

                @media (max-width: 1000px ) {
                    grid-template-columns: repeat(3, 1fr);
                }
                @media (max-width: 600px ) {
                    grid-template-columns: repeat(2, 1fr);
                    gap: 1em 1em;
                }
                @media (max-width: 340px ) {
                    grid-template-columns: 1fr;
                }

            }

            iframe {
                width: 100%;
                max-height: 50vh;
            }
        }
    }


}


</style>
